<?xml version="1.0" encoding="UTF-8"?><d:tdl xmlns="http://www.w3.org/1999/xhtml" xmlns:b="http://www.backbase.com/2006/btl" xmlns:bb="http://www.backbase.com/2006/client"  xmlns:d="http://www.backbase.com/2006/tdl" >

	<d:namespace name="http://www.backbase.com/2006/btl">

		<!--
			The value and selectedIndex property (both setter and getter) could be made faster by
			keeping a list of selected options up to date.
			This list can be created on construct/DOMNodeInsertedIntoDocument and updated in the
			DOMNodeInserted and DOMNodeInsertedIntoDocument events.
		-->

		<d:uses element="disableElement" src="../disableElement/disableElement.xml"/>
		<d:uses element="focusableElement" src="../focus/focus.xml"/>
		<d:uses element="formList" src="../formList/formList.xml"/>
		<d:uses element="positionElement dimensionElement containerElement" src="../visualElement/visualElement.xml"/>

		<d:element name="checkBoxGroup" extends="b:formList b:positionElement b:dimensionElement b:containerElement b:disableElement">
			

			

			<!-- The hidden input is needed for form submit. -->
			<d:template type="application/xhtml+xml">
				<div>
					<input type="hidden"/>
					<div>
						<d:content/>
					</div>
				</div>
			</d:template>

			<d:property name="multiple" onget="return true">
				
			</d:property>

			<d:property name="options">
				<d:getter type="text/javascript"><![CDATA[
					var aDescendants = this.getElementsByTagName('*');
					var oDescendant;
					var i = 0;
					var aOptions = [];
					while(oDescendant = aDescendants[i++]) {
						if (bb.instanceOf(oDescendant, btl.namespaceURI, 'checkBoxGroupOption')) {
							aOptions.push(oDescendant);
						}
					}
					return aOptions;
				]]></d:getter>
			</d:property>

			<d:property name="value">
				<d:getter type="text/javascript"><![CDATA[
					var aOptions = bb.getProperty(this, 'options');
					var oOption;
					var i = 0;
					var sValue = '';
					while(oOption = aOptions[i++]){
						if(bb.getProperty(oOption, 'selected')){
							sValue = bb.getProperty(oOption, 'value');
							break;
						}
					}
					return sValue;
				]]></d:getter>
				<d:setter type="text/javascript"><![CDATA[
					var aOptions = bb.getProperty(this, 'options');
					var oOption;
					var i = 0;
					while(oOption = aOptions[i++]){
						if(value == bb.getProperty(oOption, 'value')){
							oOption.setProperty('selected', true);
						} else {
							oOption.setProperty('selected', false);
						}
					}
				]]></d:setter>
			</d:property>

			<d:property name="selectedIndex">
				<d:setter type="text/javascript"><![CDATA[
					var aOptions = bb.getProperty(this, 'options');
					value = (0 <= value && value < aOptions.length) ? value : -1;
					var i = 0;
					while(oOption = aOptions[i]){
						oOption.setProperty('selected', (value == i));
						i++;
					}
				]]></d:setter>
			</d:property>

			<d:method name="enableView">
				<d:body type="text/javascript"><![CDATA[
					bb.html.removeClass(this.viewNode, 'btl-disabled');
					var aOptions = this.getProperty('options');
					var i = 0;
					var oOption;
					while(oOption = aOptions[i++]){
						if(!oOption.getProperty('disabled')){
							oOption.enableView();
						}
					}
				]]></d:body>
			</d:method>

			<d:method name="disableView">
				<d:body type="text/javascript"><![CDATA[
					bb.html.addClass(this.viewNode, 'btl-disabled');
					var aOptions = this.getProperty('options');
					var i = 0;
					var oOption;
					while(oOption = aOptions[i++]){
						oOption.disableView();
					}
				]]></d:body>
			</d:method>

			<!-- workaround so the grids do not throw an error when using this element as editor -->
			<d:method name="focus">
				
				<d:body type="text/javascript"><![CDATA[
				]]></d:body>
			</d:method>
			<!-- workaround so the grids do not throw an error when using this element as editor -->
			<d:method name="blur">
				
				<d:body type="text/javascript"><![CDATA[
				]]></d:body>
			</d:method>
		</d:element>

		<d:element name="checkBoxGroupOption" extends="b:formListOption b:focusableElement">
			

			<d:resource type="text/javascript"><![CDATA[
				if (!btl) {
					btl = {};
				}

				btl.checkBoxGroupOption = {};

				btl.checkBoxGroupOption.handlers = {};

				// Reliable "change" event firing for IE...
				btl.checkBoxGroupOption.handlers.ieclick = function() {
					var oController = bb.getControllerFromView(this);
					if (oController.__oldChecked != this.checked) {
						btl.checkBoxGroupOption.fireChangeEvent(oController);
						oController.__oldChecked = this.checked;
					}
				};

				// Reliable "change" event firing for IE...
				btl.checkBoxGroupOption.handlers.iefocusin = function() {
					bb.getControllerFromView(this).__oldChecked = this.checked;
				};

				btl.checkBoxGroupOption.handlers.change = function() {
					btl.checkBoxGroupOption.fireChangeEvent(bb.getControllerFromView(this));
				};

				btl.checkBoxGroupOption.fireChangeEvent = function(oNode) {
					do {
						oNode = oNode.getProperty('parentNode');
					} while (oNode && !oNode.instanceOf(btl.namespaceURI, 'checkBoxGroup'));
					if (oNode)
						bb.command.fireEvent(oNode, 'change', true, false);
				};
			]]></d:resource>

			<!-- In order to fix feature request (bug) 8450 onclick has been added -->
			<d:template type="application/xhtml+xml">
				<span>
					<label>
						<input type="checkbox"/>
						<span class="btl-checkBoxGroupOption-label">
							<d:content/>
						</span>
					</label>
				</span>
			</d:template>

			<d:attribute name="selected"/>

			<d:property name="selected">
				<d:setter type="text/javascript"><![CDATA[
					value = Boolean(value);
					var oInput = this.getProperty('focusElement');
					if (value != oInput.checked){
						oInput.checked = value;
						// dispatch select or deselect event that does not bubble and can not be cancelled
						bb.command.fireEvent(this, (value) ? 'select' : 'deselect', false, false);
					}
				]]></d:setter>
				<d:getter type="text/javascript"><![CDATA[
					return this.getProperty('focusElement').checked;
				]]></d:getter>
			</d:property>

			<d:property name="defaultSelected">
				
				<d:setter type="text/javascript"><![CDATA[
					this.getProperty('focusElement').defaultChecked = (value) ? true : false;
				]]></d:setter>
				<d:getter type="text/javascript"><![CDATA[
					return this.getProperty('focusElement').defaultChecked;
				]]></d:getter>
			</d:property>

			<d:property name="focusElement">
				<d:getter type="text/javascript"><![CDATA[
					return this.viewNode.firstChild.firstChild;
				]]></d:getter>
			</d:property>

			<d:constructor type="text/javascript"><![CDATA[
				var bSelected = btl.isTrueValue('selected', this.modelNode.getAttribute('selected'));
				//set initial selected state (this can be substituted by setProperty if the select/deselect events should be dispatched initially
				var oInput = this.getProperty('focusElement');
				oInput.checked = bSelected;
				//set default selected state
				oInput.defaultChecked = bSelected;

				if (bb.browser.ie) {
					bb.html.addEventListener(oInput, 'focusin', btl.checkBoxGroupOption.handlers.iefocusin);
					bb.html.addEventListener(oInput, 'click', btl.checkBoxGroupOption.handlers.ieclick);
				} else {
					bb.html.addEventListener(oInput, 'change', btl.checkBoxGroupOption.handlers.change);
				}
			]]></d:constructor>

			<d:destructor type="text/javascript"><![CDATA[
				var oInput = this.getProperty('focusElement');
				if (bb.browser.ie) {
					bb.html.removeEventListener(oInput, 'focusin', btl.checkBoxGroupOption.handlers.iefocusin);
					bb.html.removeEventListener(oInput, 'click', btl.checkBoxGroupOption.handlers.ieclick);
				} else {
					bb.html.removeEventListener(oInput, 'change', btl.checkBoxGroupOption.handlers.change);
				}
			]]></d:destructor>

 			<d:handler event="click" match=".btl-checkBoxGroupOption-label" type="text/javascript"><![CDATA[
 				if (bb.browser.ie && bb.browser.version < 7) {
				 	var oInput = this.getProperty('focusElement');
				 	oInput.checked = !oInput.checked;
				 	btl.checkBoxGroupOption.fireChangeEvent(this);
				}
			]]></d:handler>
		</d:element>
	</d:namespace>
</d:tdl>